<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>常用样式</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>


<!--导航
1、基本样式：.nav与“nav-tabs”、“nav-pi11s”组合制作导航

2、分类：
1）、标签型（nav-tabs）导航
2）、胶囊形（nav-pi11s）导航
3）、堆栈（nav-stacked）导航
4）、自适应（nav-justified）导航
5）、面包屑式（breadcrumb）导航，单独使用样式，不与nav一起使用，直接加入到o1、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）

3、状态：
1）、选中状态active样式
2）、禁用状态：disable

4、二级菜单
5、分页和翻页导航

5.3 下拉菜单 需要js
     1、使用一个类名为dropdown或btn-group的div包裹整个下拉框：
      <div class="dropdown"></div>
     2、默认向下dropdown，向上弹起加入.dropup即可
     3、使用button作为父菜单，使用类名：dropdown-toggle和自定义data-toggle属性
     <button type="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"></bu
     4、在button中使用font制作下拉箭头
      <span class="caret"></span>
     5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
     6、分组分割线：<1i>添加类名“divider”来实现添加下拉分隔线的功能7、分组标题：1i添加类名“dropdown-header”来实现分组的功能
     8、对齐方式：
     1）、dropdown-menu-1eft左对齐默认样式
     2）、dropdown-menu-right右对齐
     9、激活状态（.active）和禁用状态（.disabled）
-->

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>


<hr>

<p>分页导航</p>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

<p>翻页导航</p>

<ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>


<hr>
<p>下拉菜单</p>




<div class="dropdown">
    <!--使用button作为父菜单，使用类名：dropdown-toggle和自定义data-toggle属性-->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

    喜欢的频道
    <!--设置一箭头-->
     <span class="caret"></span>

</button>
    <!--下拉菜单-->
        <ul class="dropdown-menu">
            <!--设置分类头-->
             <li class="dropdown-header">--科普--</li>
            <!--target=blacnk新开一个窗口-->
            <li><a href="https://tv.cctv.com/lm/ryzr/" target="_blank">人与自然</a></li>
            <!--添加一个分隔线-->

            <li class="divider"></li>
            <li class="dropdown-header">--搞笑--</li>
            <!--选中的效果-->
            <li class="active"><a href="#">爱情公寓</a></li>
            <!--禁用的效果-->
            <li class="disabled"><a href="#">猫和老鼠</a></li>

        </ul>


</div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>


